import { Fragment } from '@/components/Fragment'; 
import { Expander, ExpanderItem, View } from '@aws-amplify/ui-react';

import {
  BasicSingleExpander,
  BasicMultipleExpander,
  ClassStylingExpander,
  CollapsibleExpander,
  ControlledSingleExpander,
  CustomTitleComponent,
  DefaultExpanderExample,
  ExpandedByDefaultMultipleExpander,
  StylePropsExpander,
  ExpanderThemeExample,
} from './examples';
import { ExpanderDemo } from './demo';
import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

## Demo

<ExpanderDemo />

## Usage

Import the Expander and ExpanderItem components and styles.

<Example>
  <View>
    <DefaultExpanderExample />
  </View>
  
  <ExampleCode>

```jsx file=./examples/DefaultExpanderExample.tsx

```

  </ExampleCode>
</Example>

### Single or multiple

To only allow one item to be open at a time, set the `type` prop to `single` (default).

<Example>
  <View>
    <BasicSingleExpander />
  </View>
  
  <ExampleCode>

```jsx file=./examples/BasicSingleExample.tsx

```

  </ExampleCode>
</Example>

To enable opening multiple items at once, set the `type` prop to `multiple`.

<Example>
  <View>
    <BasicMultipleExpander />
  </View>
  
  <ExampleCode>

```jsx file=./examples/BasicMultipleExample.tsx

```

  </ExampleCode>
</Example>

### Allow collapsing

To allow collapsing on a `single` Expander, set `isCollapsible` to `true`.

**Note**: The `isCollapsible` prop only applies to the `single` Expander, and it is set to `false` (not collapsible) by default.

<Example>
  <View>
    <CollapsibleExpander />
  </View>
  
  <ExampleCode>

```jsx file=./examples/CollapsibleExample.tsx

```

  </ExampleCode>
</Example>

### Expanded by default

To expand specific items by default, pass a `string` or `string[]` of value(s) to the `defaultValue` prop.

<Example>
  <View>
    <ExpandedByDefaultMultipleExpander />
  </View>
  
  <ExampleCode>

```jsx file=./examples/ExpandedByDefaultMultipleExample.tsx

```

  </ExampleCode>
</Example>

### Controlled component

To use the Expander as controlled component, specify the `value` of the item(s) to expand and use in conjunction with `onValueChange`.

<Example>
  <View>
    <ControlledSingleExpander />
  </View>
  
  <ExampleCode>

```jsx file=./examples/ControlledSingleExample.tsx

```

  </ExampleCode>
</Example>

### Custom title component

For more control over the layout or styling of the expander item header, pass a custom component to the `<ExpanderItem>` title prop.

<Example>
  <View>
    <CustomTitleComponent />
  </View>
  <ExampleCode>
```jsx file=./examples/CustomTitleComponent.tsx

```
  </ExampleCode>
</Example>


## CSS Styling

<ThemeExample component="Expander">
  <Example>
    <ExpanderThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/ExpanderThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Expander" />

### Global styling

To override styling on all Expanders, you can set the Amplify CSS variables with the built-in classes.

```css
/* styles.css */
.amplify-expander {
  --amplify-components-expander-box-shadow: 0 0 10px var(--amplify-colors-brand-primary-80);
}
```

<Example>
  <BasicSingleExpander className="expander-global-styling-example" />
</Example>

### Local styling

To override styling on a specific Expander, you can use (in order of increasing specificity): a class selector and style props.

_Using a class selector:_

```css
/* styles.css */
.my-expander {
  background-color: var(--amplify-colors-brand-primary-80);
  color: var(--amplify-colors-white);
}

.my-expander .amplify-expander__content__text {
  color: var(--amplify-colors-white);
}
```

<Example>
  <View>
    <ClassStylingExpander />
  </View>
  
  <ExampleCode>

```jsx file=./examples/ClassStylingExample.tsx

```

  </ExampleCode>
</Example>

_Using style props:_

<Example>
  <View>
    <StylePropsExpander />
  </View>
  
  <ExampleCode>

```jsx file=./examples/StylePropsExample.tsx

```

  </ExampleCode>
</Example>